<template>
  <div class="bartend_after_Sale">
    <c-title :hide="false" text="售后列表"></c-title>
    <div class="bartend_after_Sale_t">
      <van-search v-model="sn" placeholder="搜索订单" shape="round" @search="searchBtn">
        <template slot="left-icon">
          <i class="iconfont icon-sousuo1"></i>
        </template>
      </van-search>
      <van-tabs v-model="active_child" line-width="20px" @change="childChangeTab">
        <van-tab :title="item" v-for="(item, index) in childNavArr" :key="index"></van-tab>
      </van-tabs>
    </div>
    <div class="list">
      <div class="lis" v-for="item in listData" :key="item.id">
        <div class="lis_t" v-if="item.has_one_member">
          <img :src="item.has_one_member.avatar_image" class="lis_t_img" alt="" />
          <div class="txt">{{ item.has_one_member.nickname }} {{ item.has_one_member.mobile }}</div>
        </div>
        <div class="line flex-j-sb flex-a-c" v-if="item.order">
          <div class="orderSn">{{ item.order.order_sn }}</div>
          <div class="orderStatus">{{ item.status_name }}</div>
        </div>
        <div class="lis_good flex-j-sb flex-a-c">
          <div class="lis_goodImg">
            <img :src="itemk.goods_thumb" alt="" v-for="(itemk, index) in item.refund_order_goods" :key="index" />
          </div>
          <div class="lis_good_total">共{{ item.refund_order_goods.length }}件</div>
        </div>
        <div class="saleBox flex-j-sb">
          <div class="saleNo">售后编号{{ item.refund_sn }}</div>
          <div class="salePrice">退款金额 ¥{{ item.price }}</div>
        </div>
        <div class="lis_bottom flex-j-sb flex-a-c">
          <div class="lis_bottom_l">{{ item.refund_type_name }}</div>
          <div class="lis_bottom_btn" @click="to_bartend_afterSale_detail(item.id)">查看详情</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      sn: "",
      childNavArr: ["全部", "待处理", "已完成", "驳回/关闭"],
      active_child: 0,

      listData: [],
      page: 1,
      total_page: 0,
      isLoadMore: false
    };
  },
  activated() {
    this.active_child = 0;
    this.init();
    this.getData();
  },
  methods: {
    searchBtn() {
      this.init();
      this.getData();
    },
    to_bartend_afterSale_detail(id) {
      this.$router.push(this.fun.getUrl("bartend_afterSale_detail", { refund_id: id }));
    },
    async getData() {
      let _url = "plugin.self-bartending.api.employee.refund.index";
      if (this.active_child == 1) {
        _url = "plugin.self-bartending.api.employee.refund.wait";
      } else if (this.active_child == 2) {
        _url = "plugin.self-bartending.api.employee.refund.complete";
      } else if (this.active_child == 3) {
        _url = "plugin.self-bartending.api.employee.refund.cancel";
      }
      let { data, msg, result } = await $http.post(
        _url,
        {
          sn: this.sn
        },
        ""
      );
      if (result) {
        this.listData = data.data;
        this.total_page = data.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    childChangeTab() {
      this.init();
      this.getData();
    },
    init() {
      this.page = 1;
      this.listData = [];
      this.total_page = 0;
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        let _url = "plugin.self-bartending.api.employee.refund.index";
        if (this.active_child == 1) {
          _url = "plugin.self-bartending.api.employee.refund.wait";
        } else if (this.active_child == 2) {
          _url = "plugin.self-bartending.api.employee.refund.complete";
        } else if (this.active_child == 3) {
          _url = "plugin.self-bartending.api.employee.refund.cancel";
        }
        this.page = this.page + 1;
        let { data, msg, result } = await $http.post(
          _url,
          {
            page: this.page,
            sn: this.sn
          },
          ""
        );
        this.isLoadMore = true;
        if (result) {
          this.listData = this.listData.concat(data.data);
        } else {
          this.$toast(msg);
          this.page = this.page - 1;
          this.isLoadMore = false;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.bartend_after_Sale {
  overflow: hidden;
  .list {
    margin: 0 0.75rem;
    margin-top: 0.75rem;
    .lis {
      margin-bottom: 0.5rem;
    }
    .lis {
      padding: 0.75rem;
      background: #fff;
      border-radius: 0.5rem;
      margin-bottom: 0.5rem;
      .lis_bottom {
      }
      .lis_t {
        display: flex;
        align-items: center;
        .lis_t_img {
          width: 1.5rem;
          height: 1.5rem;
          background: #737373;
          border-radius: 50%;
          margin: 0;
          margin-right: 0.38rem;
        }
      }
      .lis_good {
        .lis_goodImg {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          img {
            width: 3.75rem;
            height: 3.75rem;
            background: #d6d6dc;
            border-radius: 0.38rem;
            margin: 0;
            margin-right: 0.63rem;
            margin-bottom: 1rem;
          }
        }
        .lis_good_total {
          flex-shrink: 0;
          font-size: 0.81rem;
          color: #999999;
        }
      }
      .saleBox {
        margin-bottom: 0.94rem;
        .saleNo {
          font-weight: 400;
          font-size: 0.81rem;
          color: #666666;
        }
        .salePrice {
          font-weight: bold;
          font-size: 0.81rem;
          color: #00001c;
        }
      }
      .lis_bottom {
        border-top: 0.03rem solid #f0f0f1;
        padding-top: 0.75rem;
        .lis_bottom_l {
          font-size: 0.81rem;
          color: #666666;
        }
        .lis_bottom_btn {
          border-radius: 1.88rem;
          border: 0.03rem solid #f15353;
          font-size: 0.81rem;
          color: #f15353;
          line-height: 0.9rem;
          padding: 0.59rem 0.79rem;
        }
      }
      .txt {
        font-size: 0.81rem;
        color: #999999;
      }
      .line {
        margin: 0.94rem 0;
        .orderSn {
          font-weight: 500;
          font-size: 0.81rem;
        }
        .orderStatus {
          font-size: 0.88rem;
          color: #f15353;
        }
      }
    }
  }
  .bartend_after_Sale_t {
    padding-bottom: 0.5rem;
    box-sizing: border-box;
    background: #fff;
    .van-search {
      padding-bottom: 0;
    }
  }
}
</style>
